<html>
<head>
    <title>bootstrap</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="common/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="common/bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
       ul li ul{
            margin-left:20px;
            padding-left:20px;
        }

    </style>

    <script type="text/javascript">

        var BASE_PATH = "http://localhost:8080/sunny-web/";

        $(document).ready(function(){
            console.info("ready");

            /*
            var $table = $("<table class='table table-bordered text-center text-nowrap table-condensed'></table>");
            var $thead = $("<thead></thead>");
            var $th = $("<tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>");
            $thead.append($th);
            var $tbody = $("<tbody></tbody>");
            for(var i=0; i<5; i++){
                var $td = $("<tr><td>a"+i+"</td><td>b</td><td>c</td><td>d</td></tr>")
                $td.click(function(){
                    search();
                });
                $tbody.append($td);
            }
            $table.append($thead).append($tbody);

            $("#testTable").append($table);
            */

            //只打开一个菜单目录
            $('#menu>li').on('click',function(){
                var ulElement = $(this).find('>a~ul');
                if(ulElement[0]){
                    $(this).siblings().find('>a~ul,>a~ul .in').removeClass('in');
                }
            });

            $('#regionTree').on('click','a',function(){
                //$('#regionTree a').not(this).removeClass('in');
                $(this).parent().siblings().find('ul').removeClass('in').end().find('a').filter('.glyphicon-triangle-bottom').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
            });

            $("#regionTree").on('hover','li a',function () {
                $(this).removeClass("ulLiAFontNoWrap").addClass("text-nowrap")
            }, function () {
                $(this).removeClass("text-nowrap").addClass("ulLiAFontNoWrap");
            }).removeClass("text-nowrap").addClass("ulLiAFontNoWrap");

            $("#regionTree").on('click','.glyphicon',function () {
                $(this).toggleClass("glyphicon-triangle-right");
                $(this).toggleClass("glyphicon-triangle-bottom");
            });

            getRegionTree(0,'regionTree',createTree);
        });

        function search(){
            $("#searchModal").modal('show');

            setTimeout(function(){
                $("#searchModal").modal('hide');
            },1000);
        }

        function appendTable(){
            var $table = $("<table class='table table-bordered text-center text-nowrap table-condensed'></table>");
            var $thead = $("<thead></thead>");
            var $th = $("<tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>");
            $thead.append($th);
            var $tbody = $("<tbody></tbody>");
            for(var i=0; i<5; i++){
                var $td = $("<tr><td>a"+i+"</td><td>b</td><td>c</td><td>d</td></tr>")
                $td.click(function(){
                    search();
                });
                $tbody.append($td);
            }
            $table.append($thead).append($tbody);

            $("#testTable").append($table);
        }

        function chooseRegionName(){
            $('#regionModal').modal('show');
        }

        function regionSure(){
            $('#regionModal').modal('hide');
        }

        function getRegionTree(pid,node,func){
            $.getJSON(BASE_PATH+'region/getRegionsByPid',{'pid':pid},function(data){
                console.log(data);
                func(node,data,getRegionTree);
            });
        }

        function createTree(node,data,func){
            if(data){
                for(var i=0; i<data.length; i++){

                    var elem = data[i];
                    var $li = $('<li id="li_' + elem['id'] + '"></li>');

                    if(elem['leaf']==0){//有子节点
                        var _$a = $('<a data-toggle="collapse" data-target="#ul_' + elem['id'] + '" class="glyphicon glyphicon-triangle-right" href="javascript:void(0);" value="' + elem['code'] + '" pid="'+elem['code']+'">' + elem['name'] + '</a>');
                        var _$ul = $('<ul id="ul_' + elem['id'] + '" class="nav nav-pills nav-stacked collapse"></ul>');
                        _$a.click(function () {
                            //func(this);
                            var id = $(this).attr('value');
                            $('#ul_'+id).empty();
                            func(id,'ul_'+id,createTree);
                        });
                        $li.append(_$a).append(_$ul);
                    } else {//无子节点
                        var _$a = $('<a href="javascript:void(0);" value="' + elem['code'] + '" id="a_' + elem['id'] + '">' + elem['name'] + '</a>');
                        _$a.click(function () {
                            //func(this);
                        });
                        $li.append(_$a);
                    }

                    $('#'+node).append($li);
                }
            }
        }
    </script>
</head>
<body>

<div class="container-fluid">
    <div class="row" style="margin-top:15px;margin-bottom:15px;">
        <nav>
            <div class="col-sm-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        head
                    </div>
                    <div class="panel-body sidebar">
                        <ul class="nav nav-sidebar nav-stacked" id="menu">
                            <li>
                                <a class="input-sm" href="javascript:void(0);" data-toggle="collapse"
                                   data-target="#first">1</a>
                                <ul class="nav collapse" id="first">
                                    <li>
                                        <a class="input-sm" href="javascript:void(0);" data-toggle="collapse"
                                           data-target="#first_11">1</a>
                                        <ul class="nav collapse" id="first_11">
                                            <li>
                                                <a class="input-sm" href="javascript:void(0);">11</a>
                                                <a class="input-sm" href="javascript:void(0);">11</a>
                                                <a class="input-sm" href="javascript:void(0);">11</a>
                                                <a class="input-sm" href="javascript:void(0);">11</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">1</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="input-sm" href="javascript:void(0);" data-toggle="collapse"
                                   data-target="#two">2</a>
                                <ul class="nav collapse" id="two">
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                    <li><a class="input-sm" href="javascript:void(0);">2</a></li>
                                </ul>
                            </li>
                            <li><a class="input-sm" href="javascript:void(0);">3</a></li>
                            <li><a class="input-sm" href="javascript:void(0);">4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    条件
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail2"
                                   placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">@</div>
                                <input class="form-control" type="email" placeholder="Enter email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword2"
                                   placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon" onclick="chooseRegionName();">选择地区</div>
                                <input class="form-control" type="text">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="appendTable();">Sign in</button>
                        <button type="button" class="btn btn-primary" onclick="search();">Search</button>
                    </form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    head
                </div>
                <div class="panel-body" style="padding:0px;overflow-x:auto;">
                    <table class="table table-bordered text-center text-nowrap table-condensed" style="margin:0px;">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">性别</th>
                            <th class="text-center">年龄</th>
                            <th class="text-center">住址</th>
                            <th class="text-center">电话</th>
                            <th class="text-center">邮箱</th>
                            <th class="text-center">备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>23</td>
                            <td>长沙</td>
                            <td>430992139</td>
                            <td>zhangsan@163.com</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<button type="submit" class="btn btn-primary" onclick="appendTable();">Sign in</button>
<div id="testTable" style="border:1px solid black;"></div>-->

<!-- 模态框（Modal） -->
<div class="modal" id="searchModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top:20%;">
        <div class="modal-content">
            <div class="progress progress-striped active" style="margin:0;">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 地区选择 -->
<div class="modal" id="regionModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="regionModalLabel">
                    选择地区
                </h4>
            </div>
            <div class="modal-body" id="regionModalBody" style="max-height:70%;overflow-x:hidden;overflow-y:auto;">
                <ul class="nav nav-pills nav-stacked" id="regionTree">
                    <!--<li>
                        <a href="javascript:void(0);" data-toggle="collapse" data-target="#hunan" class="glyphicon glyphicon-triangle-right">湖南省</a>
                        <ul class="nav nav-pills nav-stacked collapse" id="hunan">
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#changshashi" class="glyphicon glyphicon-triangle-right">长沙市</a>
                                <ul class="nav nav-pills nav-stacked collapse" id="changshashi">
                                    <li><a href="#">岳麓区</a></li>
                                    <li><a href="#">雨花区</a></li>
                                    <li><a href="#">开福区</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" data-toggle="collapse" data-target="#changdeshi" class="glyphicon glyphicon-triangle-right">常德市</a>
                                <ul class="nav nav-pills nav-stacked collapse" id="changdeshi">
                                    <li>
                                        <a href="#" data-toggle="collapse" data-target="#hanshouxian" class="glyphicon glyphicon-triangle-right">汉寿县</a>
                                            <ul class="nav nav-pills nav-stacked collapse" id="hanshouxian">
                                                <li>
                                                    <a href="#" data-toggle="collapse" data-target="#zhoukouzhen" class="glyphicon glyphicon-triangle-right">洲口镇</a>
                                                    <ul class="nav nav-pills nav-stacked collapse" id="zhoukouzhen">
                                                        <li><a href="#">同兴村</a></li>
                                                        <li><a href="#">前进村</a></li>
                                                    </ul>
                                                </li>
                                            <li><a href="#">罐头嘴</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">湘潭市</a></li>
                        </ul>
                    </li>-->
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="regionSure();">确定</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>